<template>
  <div class="container">
    <h1 class="topTitle"> 攻击-飞线图+鹰眼</h1>
    <div class="mapContainer" :style="mapWindowStyle">
      <div id="map"></div>
      <div ref="popover" class="popover"></div>

    </div>
  </div>
</template>

<script>
import * as L from 'leaflet'
import 'wgis.leaflet.wmts.vue2';
import 'wgis.leaflet.migration.vue2';
import MiniMap from "leaflet-minimap";

export default {
  name: 'MapMigration',
  components: {
  },
  data() {
    return {
      map: null,
      url: "",
      attr: "",
      mapWindowStyle: {
        height: '0px'
      },
      popover:null
    }
  },
  methods: {
    getHeight() {
      this.mapWindowStyle.height = String(window.innerHeight - 120) + 'px';
    },
  },
  created() {
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  mounted() {
    var miniLayer = new L.tileLayer(
            "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            {
              position: 'bottomleft',
              width: 200,
              height: 175,
            }
    );
    var eleLayer = new L.tileLayer(
            "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
            null
    );
    //飞线功能
    const migrationData = [
      {
        "color": "#ff0000",
        "from": [116.404844, 39.91405],
        "to": [84.9023, 42.148],
        "labels": ["北京", "新疆"],
        "value": 84.9023
      }, {
        "color": "green",
        "from": [116.404844, 39.91405],
        "to": [87.8695, 31.6846],
        "labels": ["北京", "西藏"],
        "value": 87.8695
      }, {
        "color": "green",
        "from": [116.404844, 39.91405],
        "to": [112.5977, 41.3408],
        "labels": ["北京", "内蒙古"],
        "value": 112.5977
      }, {
        "color": "green",
        "from": [116.404844, 39.91405],
        "to": [95.2402, 35.4199],
        "labels": ["北京", "青海"],
        "value": 95.2402
      }, {
        "color": "green",
        "from": [116.404844, 39.91405],
        "to": [101.9199, 30.1904],
        "labels": ["北京", "四川"],
        "value": 1.9199
      }, {
        "color": "blue",
        "from": [116.404844, 39.91405],
        "to": [126.1445, 48.7156],
        "labels": ["北京", "黑龙江"],
        "value": 126
      }
    ];
    this.popover = this.$refs.popover ;
    let that = this;
    var migrationOptions = {
      pulseRadius: 1,
      arcWidth: 1,
      label: true,
      order: false,
      replacePopover: function (x, y, data, index) {
        console.log(x, y, data, index, 'show popover');
        that.popover.innerHTML = '被攻击方:' + data.labels[1] + '<br> 攻击方:' + data.labels[0] + "<br> 次数:" + data.value
        return that.popover;
      },
      onHidePopover: function (index) {
        console.log('hide popover', index);
      }
    };
    let migrationLayer = L.migrationLayer(migrationData.map(i => Object.assign(i, {  })), migrationOptions);



    let map = L.map("map", {
      minZoom: 1,
      maxZoom: 13,
      center: [39.92, 116.46],
      zoom: 4,
      zoomControl: false,
      crs: L.CRS.EPSG3857,
    });
    map.addLayer(eleLayer);
    //map.addLayer(miniLayer);

    let overViewLayer = new MiniMap(miniLayer, {
      toggleDisplay: true
    }).addTo(map);
    // 底图图层
    let Map_BaseLayer = {
      "图层": eleLayer,
    };
    L.control.layers(null,Map_BaseLayer).addTo(map);
    migrationLayer.addTo(map);
    this.map = map;
    this.map.on('click', function(e) {
      console.log('纬度：' + e.latlng.lat + '\n经度：' + e.latlng.lng);
      that.popover.innerHTML = "";
    });
  }
}
</script>

<style lang="stylus" scoped>
@import 'leaflet/dist/leaflet.css'
@import "leaflet-draw/dist/leaflet.draw.css"
@import 'leaflet-minimap/dist/Control.MiniMap.min.css';

.container
  width: 100%
  h1.topTitle
    text-align: center
  .mapContainer
    border: 1px solid red
    text-align: left
    #map
      height: 100%
      width: 100%
.popover
  background black
  color white
  font-size  24px

</style>